<template>
    <!-- 该组件为编辑订单中的继续添加商品组件 -->
    <view class="all">
        <view class="colseshow" @click="CloseWindow"></view>
        <view class="head">
            <text>添加物品</text>
            <image @click="CloseWindow" src="../../../../static/img/myhome/close@3x.png" mode=""></image>
        </view>
        <view class="backgroundcolor">
            <scroll-view scroll-y="true">
                <view class="box">
                    <!-- 选择物品类型 s -->
                    <view class="selecttype">
                        <view class="type" @click="selectShow = true">
                            <text>物品类型</text>
                            <view class="pic">
                                <text
                                    style="overflow: hidden;white-space: nowrap; text-overflow: ellipsis;">{{ selectText || '请选择' }}</text>
                                <u-icon name="arrow-down-fill" color="#999999" size="20"></u-icon>
                            </view>
                        </view>

                        <!-- 物品类型下拉选择
                        <view class="type" @click="show = true">
                            <text>物品类型</text>
                            <view class="pic">
                                <text
                                    style="overflow: hidden;white-space: nowrap; text-overflow: ellipsis;">{{ selectText || '请选择' }}</text>
                                <u-icon name="arrow-down-fill" color="#999999" size="20"></u-icon>
                            </view>
                        </view>
                        -->

                        <!-- <view class="kg"> -->
                        <!-- <view><input placeholder="请输入物品名称" v-model="wp.remsck"></input></view> -->
                        <!-- <view><text>个</text></view> -->
                        <!-- </view> -->
                    </view>
                    <!-- 选择物品类型 e -->

                    <!-- 计量方式 e -->
                    <view class="oneprice">
                        <text>单价</text>
                        <input type="digit" v-model="wp.unit_price" :disabled="priceDisabled" />
                        <!-- <input type="digit" v-model="wp.unit_price" /> -->
                        <view>
                            <text>元/{{ jlList[wp.unit] }}</text>
                        </view>
                    </view>

                    <!--                     <view class="selecttype1" style="margin-top: 20rpx;" v-if="jlList[wp.unit] == 'KG'">
                        <text>地磅</text>
                        <view>
                            <text>{{ table_show }}</text>
                        </view>
                    </view> -->

                    <view class="selecttype1" style="margin-top: 20rpx;" v-if="jlList[wp.unit] == 'KG'">
                        <text>地磅列表</text>
						<view style="display: flex;flex-wrap: wrap;">
							<block  v-for="(item,index) in WeighbridgeListData" :key="index">
								<u-tag :text="item.names" mode="dark" :type="landnum==index ? 'success ':'primary'"  @click="selectDB(index,item)"/>
							</block>
						</view>
						
	<!-- 					
                        <view>
                            <text @click="show1=true">{{selectWeighbridge}}</text>
                            <view class="selectDB" v-if="show1">
                                <text v-for="(item,index) in WeighbridgeListData" :key="index"
                                    @click="selectDB(index,item)">{{item.names}}</text>
                            </view>
                        </view> -->
                    </view>
                    <!-- <template>
  <div>
    <video ref="video" autoplay></video>
    <canvas ref="canvas"></canvas>
    <img ref="webrtc://183.60.220.66:1240/jinshui100/jinshui101" />
  </div>
</template> -->
                    <!-- 过磅 -->
                    <view class="selectgb" v-if="jlList[wp.unit] == 'KG'">
                        <view class="type"><text>过磅</text></view>
                        <view class="kg">
                            <view class="label-text" @click="beforeCount()"><text>卸车前过磅</text></view>
							<!-- :disabled="priceDisabled" -->
                            <view><input type="digit" placeholder="卸车前过磅" v-model="wp.b_weigh"/></view>
                            <view>
                                <text>{{ jlList[wp.unit] }}</text>
                            </view>
                            <view class="buttons">
                                <button @click="postedit1"><span>读取</span></button>
                            </view>
                        </view>
                        <image :src="wp.landnumImg1"></image>
						<image :src="wp.landnumImg11"></image>
						
                        <view class="kg">
                            <view class="label-text" @click="afterCount()"><text>卸车后过磅</text></view>
							<!-- :disabled="priceDisabled" -->
                            <view><input type="digit" @change="aWeight" placeholder="卸车后过磅" v-model="wp.a_weigh"/></view>
                            <view>
                                <text>{{ jlList[wp.unit] }}</text>
                            </view>
                            <view class="buttons">
                                <button @click="postedit2"><span>读取</span></button>
                            </view>
                        </view>
                        <image :src="wp.landnumImg2"></image>
						<image :src="wp.landnumImg22"></image>
						
                    </view>

                    <!-- 计量方式 s -->
                    <view class="selectkg">
                        <view class="selectkg1"><text>回皮重量</text><input type="digit" placeholder="KG"
                                v-model="wp.r_weigh" /></view>

                        <view class="type">
                            <text>净重</text>
                            <view>
                                <picker @change="jlType" :range="jlList" disabled>
                                    <label class="select">{{ jlList[wp.unit] }}</label>
                                    <!-- <i></i> -->
                                </picker>
                            </view>
                        </view>
                        <view class="kg">
                            <view><input type="digit" placeholder="去皮重量" v-model="wp.weight_diff" /></view>
                            <view>
                                <text>{{ jlList[wp.unit] }}</text>
                            </view>
                        </view>
                        <view class="selectkg2"><text>备注</text><input placeholder="备注信息"
                                v-model="wp.remark" /></view>
                    </view>

                    <view class="img">
                        <view class="type"><text>上传图片</text></view>
                        <view class="kg">
                            <u-upload ref="upload" :action="baseUrl + '/api/images/upload'" :form-data="{ code: '999' }"
                                width="150rpx" height="150rpx" @on-success="uploadSu" @on-remove="oploadRe"></u-upload>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
        <view class="button">
            <button @click="postedit"><span>确定</span></button>
        </view>

        <u-popup v-model="selectShow" mode="bottom">
            <producttype @myEven="changeProductType" :product-types="productTypes" @closewin="colseProductType" ref="popupProductType">
            </producttype>
        </u-popup>

        <!-- 物品类型下拉选择
        <u-select mode="mutil-column-auto" v-model="show" :list="wptypelist" value-name="id" label-name="wp_name"
            child-name="plist" :default-value="defaultValue" @confirm="confirm"></u-select>
        --> 
    </view>
</template>

<script>
    import {
        mapState,
        mapMutations
    } from 'vuex';
    const funclib = require('@/untlis/funclib.js');
    import {
        v4
    } from 'uuid';
    var mqtt = require('mqtt/dist/mqtt.js');
    import producttype from './product_type.vue';
    export default {
        components:{
            producttype
        },
        data() {
            return {
                // 物品的类型
                wptypelist: [],
                // 计量的方式
                jlList: ['KG', '个/台'],
                defaultValue: [0, 0, 0],
                selectText: '',
                lands: [],
                show: false,
                wp: {
                    wp_name: '',
                    remsck: '',
                    weight: '',
                    weight_diff: '',
                    landnumImg1: '',
					landnumImg11: '',
                    landnumImg2: '',
					landnumImg22: '',
                    weightIndex: 0,
                    wsize: '',
                    img: [],
                    imgs: '',
                    wp_type: [],
                    nums: null,
                    unit_price: null,
                    unit: 0,
                    total_price: 0,
                    a_weigh: '',
                    b_weigh: '',
                    r_weigh: '',
                    remark: ''
                },
                baseUrl: '',
                priceDisabled: true,
                //20221118
                isGetWeight: 0,
                table_show: 0,
                clientConn: null,
                //地磅列表
                WeighbridgeListData: '',
                show1: false,
                //选中的地磅列表
                selectWeighbridge: '',
                //选中的地磅下标
                landnum: '',
                landnumImg1: '',
                landnumImg2: '',
                wpp: null,
                selectShow:false,
                productTypes: [],
            };
        },
        created() {
            this.baseUrl = this.$store.state.baseUrl;
            // this.wptypelist = this.$store.state.wptypelist;
            //获取地磅列表
            this.getWeighbridgeListApiFunc()
			this.getNewWptypelist()
            this.wp.b_weigh   = this.prevWeight
        },
        computed: {
            value() {
                return this.wp.weight_diff = (this.wp.b_weigh - this.wp.a_weigh - this.wp.r_weigh)
            }
        },
        methods: {
            ...mapMutations([
                'getWp'
            ]),
            setPriceDisabled(priceDisabled) {
                this.priceDisabled = priceDisabled
            },
			getNewWptypelist() {
				this.wptypelist = uni.getStorageSync('setWptypeList')
				this.productTypes = this.wptypelist
			},
            prevWeight(weight) {
                this.wp.b_weigh = weight
            },
            aWeight(v) {
                this.wp.nums = this.count(this.wp.b_weigh, this.wp.a_weigh)
            },
            count(a, b) {
                var multiple = 1000
                return Math.round(parseFloat(a) * multiple - parseFloat(b) * multiple) / multiple
            },
            handPriceDisabled() {
                this.priceDisabled = false;
            },
            oploadRe(index) {
                this.wp.img.splice(index, 1);
            },
            uploadSu(data) {
                this.wp.img.push(data.data.url);
            },
            // 关闭添加物品弹窗
            CloseWindow() {
                // this.clientConn.end();
                this.$emit('closewin');
            },
            // 选择计量方式
            jlType(e) {
                this.wp.unit = e.target.value;
                this.wp.weight = this.jlList[this.wp.unit];
            },
            // 确定编辑
            postedit() {
                //20221107关闭mqtt连接
                // this.clientConn.end();

                this.wp.imgs = this.wp.img.join(',');
                if (this.$u.test.isEmpty(this.wp.weight)) {
                    this.wp.weight = 'KG';
                }
                if (this.$u.test.isEmpty(this.wp.wp_name)) {
                    uni.showToast({
                        title: '请选择物品',
                        duration: 1000,
                        icon: 'none'
                    });
                    return;
                } else if (this.$u.test.isEmpty(this.wp.weight)) {
                    uni.showToast({
                        title: '请选择重量',
                        duration: 1000,
                        icon: 'none'
                    });
                    return;
                } else if (!this.$u.test.amount(this.wp.unit_price)) {
                    uni.showToast({
                        title: '请输入正确金额',
                        duration: 1000,
                        icon: 'none'
                    });
                    return;
                }
                // else if (this.$u.test.isEmpty(this.wp.imgs)) {
                //     uni.showToast({
                //         title: '请上传图片',
                //         duration: 1000,
                //         icon: 'none'
                //     });
                //     return ;
                // }
                else {
                    if (this.wp.unit == 0) {
                        let rWeigh = this.wp.r_weigh ? parseFloat(this.wp.r_weigh) : 0;
                        let bWeigh = this.wp.b_weigh ? parseFloat(this.wp.b_weigh) : 0;
                        let aWeigh = this.wp.a_weigh ? parseFloat(this.wp.a_weigh) : 0;

                        this.wp.weight_diff = (bWeigh - aWeigh - rWeigh);
                        let tmprice = (bWeigh - aWeigh - rWeigh) * parseFloat(this.wp.unit_price);
                        this.wp.total_price = funclib.keepDecimal(tmprice, 2);
                    } else if (this.wp.unit == 1) {
                        this.wp.total_price = funclib.keepDecimal(this.wp.nums * this.wp.unit_price, 2);
                    }
                    this.$emit('myEven', this.wp);
                    // this.getWp({
                    //     dataWp: this.wp
                    // })
                    // this.$store.commit('getWp', this.wp)
                    this.wp = {
                        wp_name: '',
                        remsck: '',
                        weight: '',
                        weight_diff: '',
                        landnumImg1: '',
                        landnumImg2: '',
                        weightIndex: 0,
                        wsize: '',
                        img: [],
                        imgs: '',
                        wp_type: [],
                        nums: null,
                        unit_price: null,
                        unit: 0,
                        total_price: 0,
                        a_weigh: '',
                        b_weigh: '',
                        r_weigh: '',
                        remark: ''
                    };
                    this.defaultValue = [0, 0, 0];
                    this.$refs.upload.clear();
                    this.selectText = '请选择';
                }

            },

            //读取第一个地磅参数
            postedit1() {
                let _this = this;
                _this.$u.api.getWeighbridgeListApi({
                    landnum: _this.landnum
                }).then(data => {
                    console.log("读取回来的参数", data);
                    _this.wp.b_weigh = data.weigh_number;
                    _this.wp.weight_diff = _this.wp.b_weigh - _this.wp.a_weigh - _this.wp.r_weigh;
                    _this.wp.landnumImg1 = data.images;
					_this.wp.landnumImg11 = data.images_2;
					
                    console.log("读取回来的参数1", data);
                })
            },	
            postedit2() {
                let _this = this;
                _this.$u.api.getWeighbridgeListApi({
                    landnum: _this.landnum
                }).then(data => {
                    console.log("读取回来的参数", data);
                    _this.wp.a_weigh = data.weigh_number;
                    _this.wp.landnumImg2 = data.images;
					_this.wp.landnumImg22 = data.images_2;
                    _this.wp.weight_diff = _this.wp.b_weigh - _this.wp.a_weigh - _this.wp.r_weigh;
                    _this.wp.nums =  _this.wp.b_weigh - _this.wp.a_weigh - _this.wp.r_weighs;
                    console.log("读取回来的参数1", _this.wp.a_weigh); 
                })
            },
            /* 物品类型下拉选择
            confirm(e) {
                this.selectText = e[1].label;
                this.wp.wp_name = e[1].label;
                // this.wp.wsize = e[2].label;
                this.wp.unit_price = e[1].extra.split(',')[0];
                this.wp.unit = Number(e[1].extra.split(',')[1]);
                this.wp.weight = this.wp.unit == 0 ? 'KG' : '个';
                this.wp.wp_type = [e[0].value, e[1].value];
            },
            */
            //20221118
            //确定过磅前重量
            beforeCount() {
                var that = this;
                console.log(that)
                that.wp.nums = that.table_show;
                that.wp.b_time = new Date().valueOf()
                if (that.isGetWeight == 1) that.wp.b_weigh = that.table_show;
                _this.wp.weight_diff = _this.wp.b_weigh - _this.wp.a_weigh;
            },
            //确定过磅后重量
            afterCount() {
                var that = this;
                that.wp.nums = that.table_show;
                that.wp.a_time = new Date().valueOf()
                if (that.isGetWeight == 1) that.wp.a_weigh = that.table_show;
                _this.wp.weight_diff = _this.wp.b_weigh - _this.wp.a_weigh;
            },

            //获取地磅列表
            getWeighbridgeListApiFunc() {
                let _this = this;
                this.$u.api.getWeighbridgeListApi().then(data => {
                    console.log("地磅列表", data);
                    _this.WeighbridgeListData = data;
                    //默认选中第一个
                    _this.selectWeighbridge = data[0].names;
                    console.log("默认选中的", _this.selectWeighbridge);
                    //默认选中第一个地磅的下标
                    _this.landnum = 0;
                })
            },

            //选择地磅
            selectDB(index, item) {
                let _this = this;
                _this.selectWeighbridge = item.names;
                _this.show1 = false;

                //选中的地磅下标
                _this.landnum = index;
            },


            //获取货物重量
            // getTweight() {
            //     var that = this;
            //     that.isGetWeight = 1;
            //     let options = {
            //         connectTimeout: 5000,
            //         clientId: "",
            //         username: "",
            //         password: "",
            //         clean: false
            //     };
            //     options.clientId = v4();
            //     //2023/3/22
            //     let service_init = uni.getStorageSync('service_init')
            //     console.log('===========' + JSON.stringify(service_init))
            //     let service_setting = service_init.service_setting
            //     // if (!service_setting) {
            //     //     uni.showToast({
            //     //         title: '地磅连接错误，请联系管理员4',
            //     //         icon:'none'

            //     //     })
            //     //     return
            //     // }
            //     // options.username = that.$store.state.MQTT_USERNAME;
            //     // options.password = that.$store.state.MQTT_PASSWORD;
            //     // let MQTT_PORT = that.$store.state.MQTT_PORT;
            //     options.username = service_setting.MQTT_USERNAME;
            //     options.password = service_setting.MQTT_PASSWORD;
            //     let MQTT_PORT = service_setting.MQTT_PORT;
            //     let MQTT_TOPIC = "";
            //     // let MQTT_NUMBER = that.$store.state.MQTT_NUMBER;
            //     let MQTT_NUMBER = service_setting.MQTT_NUMBER;
            //     MQTT_TOPIC = "/CloudComData/"+ MQTT_NUMBER;
            //     // let connUrl = "wxs://" + that.$store.state.MQTT_IP + ":" + MQTT_PORT + "/mqtt"; //线上
            //     let connUrl = "wxs://" + service_setting.MQTT_IP + ":" + MQTT_PORT + "/mqtt"; //线上
            //     console.log("MQTT_TOPIC:" + MQTT_TOPIC);
            //     console.log("MQTT_NUMBER:" + MQTT_NUMBER);
            //     console.log(connUrl);
            //     that.clientConn = mqtt.connect(connUrl, options);
            //     that.clientConn.on("connect", function() {
            //         console.log("连接成功......");
            //         that.clientConn.subscribe(MQTT_TOPIC, function(err) {
            //             if (!err) console.log("订阅成功......");
            //         });
            //     }).on("reconnect", function(error) {
            //         console.log("正在重新连接......", error);
            //     }).on("error", function(error) {
            //         console.log("连接失败......", error);
            //     }).on("end", function() {
            //         console.log("连接断开......");
            //     }).on("message", function(topic, message) {
            //         let encodedString = String.fromCharCode.apply(null, new Uint8Array(message));
            //         let finalWeight = parseFloat(encodedString) * 1000;
            //         console.error(finalWeight, '地磅数')
            //         if (finalWeight > 0) {
            //             that.table_show = finalWeight;
            //         }
            //         console.log(message);
            //         console.log(encodedString);
            //     });
            // },
            colseProductType() {
                this.selectShow = false;
            },
            changeProductType(item, index) {
                this.selectText    = item.wp_name;
                this.wp.wp_name    = item.wp_name;
                this.wp.unit_price = item.u_price;
                this.wp.unit       = Number(item.unit);
                this.wp.weight     = this.wp.unit == 0 ? 'KG' : '个';
                this.wp.wp_type    = [item.pid, item.id];
                this.selectShow    = false
            },
        }
    };
</script>

<style lang="scss" scoped>
    .all {
        position: relative;
        height: 100%;
    }

    .head {
        height: 88rpx;
        background-color: #ffffff;

        text {
            margin-left: 30rpx;
            line-height: 88rpx;
        }

        image {
            float: right;
            width: 85rpx;
            height: 85rpx;
        }
    }

    .box {
        padding: 30rpx;
        max-height: 800rpx;

        picker {
            width: 440rpx;
            height: 60rpx;
            background-color: #f7f7f7;
            border-radius: 10rpx;
            border: solid 2rpx #f2f2f2;
            padding: 0 28rpx;
            color: #999999;
            font-size: 28rpx;
            line-height: 60rpx;

            i {
                margin-top: 30rpx;
                float: right;
                width: 0;
                height: 0;
                border: 10rpx solid;
                border-color: #999999 transparent transparent;
            }
        }
    }

    .selecttype {
        margin-top: 30rpx;
        padding: 18rpx 0 25rpx 0;
        background-color: #ffffff;
        border-radius: 20rpx;

        view {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .type {
            border-bottom: 1px solid #eeeeee;
            padding-bottom: 15rpx;
        }

        .kg {
            margin: 30rpx 30rpx 0;
            width: 630rpx;
            border-radius: 10rpx;
            border: solid 2rpx #e5e5e5;
            background-color: #ffffff;

            view:nth-child(1) {
                width: 630rpx;
                height: 70rpx;
                background-color: #ffffff;

                input {
                    margin-left: -250rpx;
                    font-size: 24rpx;
                    color: black;
                }
            }

            view:nth-child(2) {
                width: 125rpx;
                height: 70rpx;
                border-left: solid 2rpx #e8e9ed;
                background-color: #f7f7f7;

                text {
                    font-size: 24rpx;
                    color: #191919;
                }
            }
        }

        .pic {
            width: 440rpx;
            height: 60rpx;
            background-color: #f7f7f7;
            border-radius: 10rpx;
            border: solid 2rpx #f2f2f2;
            padding: 0 28rpx;
            color: #999999;
            font-size: 28rpx;
            line-height: 60rpx;
            display: flex;
            justify-content: space-between;
        }
    }

    .selectkg {
        margin-top: 30rpx;
        // display: flex;
        // justify-content: space-around;
        // align-items: center;
        padding: 18rpx 0 25rpx 0;
        background-color: #ffffff;
        border-radius: 20rpx;

        .selectkg1 {
            width: 95%;
            height: 65rpx;
            margin-left: 18rpx;
            margin-bottom: 20rpx;

            text {
                margin-left: -5rpx;
            }

            input {
                width: 75%;
                height: 100%;
                background-color: #f7f7f7;
                border-radius: 10rpx;
            }
        }

        .selectkg2 {
            width: 95%;
            height: 65rpx;
            margin-left: 20rpx;
            margin-top: 20rpx;

            text {
                margin-left: -5rpx;
            }

            input {
                height: 100%;
                width: 85%;
                // margin-left: 10rpx;
                float: right;
                background-color: #f7f7f7;
                border-radius: 10rpx;
            }
        }

        view {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .type {
            border-bottom: 1px solid #eeeeee;
            padding-bottom: 15rpx;
        }

        .kg {
            margin: 30rpx 30rpx 0;
            width: 630rpx;
            border-radius: 10rpx;
            border: solid 2rpx #e5e5e5;
            background-color: #ffffff;

            view:nth-child(1) {
                width: 630rpx;
                background-color: #ffffff;

                text {
                    font-size: 24rpx;
                    color: #666666;
                }

                input {
                    // margin-left: -180rpx;
                    font-size: 24rpx;
                    color: #666666;
                }
            }

            view:nth-child(2) {
                width: 125rpx;
                height: 70rpx;
                border-left: solid 2rpx #e8e9ed;
                background-color: #f7f7f7;

                text {
                    font-size: 24rpx;
                    color: #191919;
                }
            }
        }
    }

    .selectgb {
        margin-top: 30rpx;
        // display: flex;
        // justify-content: space-around;
        // align-items: center;
        padding: 18rpx 0 25rpx 0;
        background-color: #ffffff;
        border-radius: 20rpx;

        view {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .type {
            border-bottom: 1px solid #eeeeee;
            padding-bottom: 15rpx;
            justify-content: flex-start;
            padding-left: 15rpx;
        }

        .kg {
            margin: 30rpx 30rpx 0;
            width: 630rpx;
            border-radius: 10rpx;
            border: solid 2rpx #e5e5e5;
            background-color: #ffffff;
            display: flex;
            justify-content: space-between;

            view:nth-child(1) {
                width: 200rpx;
                height: 70rpx;
                border-right: solid 2rpx #e8e9ed;
                background-color: #f7f7f7;
            }

            view:nth-child(2) {
                flex-grow: 1;
                background-color: #ffffff;

                text {
                    font-size: 24rpx;
                    color: #666666;
                }

                input {
                    font-size: 24rpx;
                    color: #666666;
                }
            }

            view:nth-child(3) {
                width: 125rpx;
                height: 70rpx;
                border-left: solid 2rpx #e8e9ed;
                background-color: #f7f7f7;

                text {
                    font-size: 24rpx;
                    color: #191919;
                }
            }
        }
    }

    .oneprice {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 30rpx;
        height: 98rpx;
        line-height: 98rpx;
        background-color: #ffffff;
        border-radius: 20rpx;
        padding: 0 30rpx;

        input {
            text-align: right;
        }

        view {
            // float: right;
        }
    }

    .img {
        margin-top: 30rpx;
        // height: 273rpx;
        // display: flex;
        // justify-content: space-around;
        // align-items: center;
        padding: 18rpx 29rpx 25rpx 29rpx;
        background-color: #ffffff;
        border-radius: 20rpx;

        .type {
            height: 98rpx;
            line-height: 98rpx;
            border-bottom: 1px solid #eeeeee;
            padding-bottom: 15rpx;

            text {
                margin-right: 505rpx;
            }
        }

        .kg {
            margin-top: 30rpx;
            width: 630rpx;
            border-radius: 10rpx;
            background-color: #ffffff;
            // margin-bottom: 210rpx;

            image {
                width: 120rpx;
                height: 120rpx;
                margin-right: 20rpx;
                background-color: #f2f2f2;
                border-radius: 10rpx;
            }
        }
    }

    .button {
        position: flexd;
        left: 10rpx;
        padding: 20rpx 0;
        height: 140rpx;
        background-color: #eeeeee;

        button {
            width: 570rpx;
            height: 98rpx;
            background-color: #1bc078;
            border-radius: 49rpx;
        }

        button {
            width: 108rpx;
            height: 98rpx;
            background-color: #1bc078;
            border-radius: 49rpx;
        }

        span {
            font-size: 28rpx;
            color: #ffffff;
        }
    }

    .buttons {
        position: flexd;
        left: 10rpx;
        padding: 20rpx 0;
        height: 140rpx;
        background-color: #eeeeee;


        button {
            width: 108rpx;
            height: 98rpx;
            background-color: #1bc078;
            border-radius: 49rpx;
        }

        span {
            font-size: 28rpx;
            color: #ffffff;
        }
    }

    .colseshow {
        width: 750rpx;
        height: calc(100% - 1028rpx);
        opacity: 0.1;
        background-color: #000000;
    }

    .backgroundcolor {
        background-color: #eeeeee;
    }

    .selecttype1 {
        position: relative;
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 98rpx;
        background-color: #ffffff;
        border-radius: 20rpx;

        view {
            width: 440rpx;
            height: 60rpx;
            background-color: #f7f7f7;
            border-radius: 10rpx;
            border: solid 2rpx #f2f2f2;
            padding: 0 28rpx;
            color: #999999;
            font-size: 28rpx;
            line-height: 60rpx;
            display: flex;
            justify-content: space-between;
        }

        .selectDB {
            position: absolute;
            top: 90rpx;
            left: 210rpx;
            width: 200rpx;
            height: auto;
            background-color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
    }

    .label-text {
        background-color: #f0ad4e !important;
    }
</style>